Help - Search - Members - Calendar
Full Version: UL navbar issues with unordered lists
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
judo2000
Hi,
I have a style sheet from a site templete. I added code to create an inline nav bar using nut the styles for the nav affect all unordered lists. I will post the navb script:void(0)" class="dropbtn">Heaven's Guests</a>
<div class="dropdown-content">
<font color="#000000"><b>Search By:</b></font>
<a href="#">Name</a>
<a href="#">State</a>
<a href="#">Country</a>
</div>
</li>
<li class="dropdown">
<a href="java script:void(0)" class="dropbtn">Categories</a>
<div class="dropdown-content">
<a href="#">Armed Forces</a>
<a href="#">Child</a>
<a href="#">Friend</a>
<a href="#">Law Engorcement</a>
<a href="#">Parent</a>
<a href="#">Spouse</a>
</div>
</li>
<li><a href="#">About Us</a></li>
<li><a href="login.html">Log In/Register</a></li>
</ul>
</div>

CSS:

/* Resets */
ul {
padding:0;
margin:0 0 20px 0;
list-style:none;
color: #FFFFFF;
font-weight:bold;
}
h1, h2 {
padding:0;
margin:0 0 20px 0;
font-weight:normal;
}
p {
padding:0;
margin:0 0 20px 0;
}
a:link, a:visited {
text-decoration:underline;
color:#FFFFFF;
font-weight:bold;
}
a:hover {
text-decoration:none;
}
ul li {
padding:5px 0;
}
ul li input[type="text"], ul li input[type="password"] {
width:200px;
}
/* Headers */
h1 {
font-size:1.8em;
}
h2 {
font-size:1.4em;
}
.logo {
font:2em Arial;
margin:0 0 10px 0;
padding:0;
width:200px;
color:#fff;
}


/* Headers */
h1 {
font-size:1.8em;
}
h2 {
font-size:1.4em;
}
.logo {
font:2em Arial;
margin:0 0 10px 0;
padding:0;
width:200px;
color:#fff;
}
/* Containers */
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
background-color: #7B6D8D;
}
#container {
background:#fff;
width:920px;
min-height:500px;
margin:0 auto;
padding: 10px;

}
#footer {
margin:0 auto 0px auto;
width:920px;
background-color: #AAAE8E;
color: #000000;
padding: 10px;
text-align:center;
}

.widget {
margin-bottom:20px;
color: $FFFFFF;
}
.widget h2 {
margin:0 0 10px 0;
padding:0 5px;
font-weight:normal;
border-bottom:1px solid #ddd;
}
.widget .inner {
margin:0 10px;
color: $FFFFFF;
}

header {
width:940px;
margin:0 auto 0px auto;
}

#nav {
width:940px;
margin-left: auto;
martin-right: auto;
display: inline-block;
background-color: #3A606E;
}



/* Navigation Styles */
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3A606E;
}

li {
float: left;
}

li a, .dropbtn {
display: block;
color: white;
font-weight:bold;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #AAAE8E;
}

.active {
background-color: #AAAE8E;
}

.drip {
background-color: #A5C4D4;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #E0E0E0;
color: #FFFFFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: #000000;
font-weight:bold;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #AAAE8E;
color: #FFFFFFl;
}

.dropdown:hover .dropdown-content {
display: block;
}


/* Aside */
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-left:15px;
}
/* Login */
#login li.link {
margin-top:5px;
}

/* Misc */
.clear {
clear:both;



pandy
I don't understand. What is the problem you want help with?

QUOTE
I will post the navb script:void(0)" class="dropbtn">Heaven's Guests</a>


You mean this?

CODE
<a href="java script:void(0)" class="dropbtn">Categories</a>


That's not a script. It's a link that does nothing. Is that the problem?
Christian J
QUOTE(judo2000 @ Mar 3 2017, 03:02 AM) *

I added code to create an inline nav bar using nut the styles for the nav affect all unordered lists.

You need to use more specific selectors for the nav bar list than simple UL or LI selectors. It's hard to give specific advice since the code example is cut off at the beginning, but an idea might be to target a parent DIV like this:

CODE
div#navbar ul {...}

and in the HTML:

CODE
<div id="navbar">
<ul>
<li>
...

judo2000
Not sure what happened at the beginning but here is the nav code:

<div id="nav" align="center">
<ul>
<li><a class="active" href="index.htmo">Home</a></li>
<li class="dropdown">
<a href="java script:void(0)" class="dropbtn">Heaven's Guests</a>
<div class="dropdown-content">
<font color="#000000"><b>Search By:</b></font>
<a href="#">Name</a>
<a href="#">State</a>
<a href="#">Country</a>
</div>
</li>
<li class="dropdown">
<a href="java script:void(0)" class="dropbtn">Categories</a>
<div class="dropdown-content">
<a href="#">Armed Forces</a>
<a href="#">Child</a>
<a href="#">Friend</a>
<a href="#">Law Engorcement</a>
<a href="#">Parent</a>
<a href="#">Spouse</a>
</div>
</li>
<li><a href="#">About Us</a></li>
<li><a href="login.html">Log In/Register</a></li>
</ul>
</div>
judo2000
Thanks for the help, but I found an example of how to do it and edited my code to make it work.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.