UL navbar issues with unordered lists |
UL navbar issues with unordered lists |
judo2000 |
Mar 2 2017, 09:02 PM
Post
#1
|
Group: Members Posts: 3 Joined: 2-March 17 Member No.: 26,332 |
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; |
Lo-Fi Version | Time is now: 25th April 2024 - 10:46 AM |