Printable Version of Topic

Posted by: judo2000 Mar 2 2017, 09:02 PM

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;

Posted by: pandy Mar 2 2017, 11:36 PM

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

You mean this?



That's not a script. It's a link that does nothing. Is that the problem?

Posted by: Christian J Mar 3 2017, 06:55 AM

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:


and in the HTML:

Posted by: judo2000 Mar 3 2017, 05:56 PM

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>

Posted by: judo2000 Mar 4 2017, 05:20 PM

Thanks for the help, but I found an example of how to do it and edited my code to make it work.