I have a dropdown menu working but need it centered under the parent.
You can see this in action over at http://jsfiddle.net/mayurj/a3TS9/
Specific to the example above, the two dropdown menus under "About us" and "Services" are not auto centering under their parent menu items. By the way, the second drop down menu (Services --> Media Services) works just fine (opens to the right).
Secondly, I also need the parent to remain highlighted (blue) under the two drop downs described above. I know there is something called a CSS selector, but not sure how to make it work.
Can both my issues be done with pure CSS?
------------- HTML CODE BELOW --------------------
<body>
<div id="navcontainer">
<nav id="access" role="navigation">
<div class="menu-primary-container"><ul id="menu-primary" class="menu"><li id="menu-item-64" class="current-menu-item page_item page-item-4 current_page_item menu-item-64">Home</li>
<li id="menu-item-72" class="menu-item-72">About us
<ul class="sub-menu">
<li id="menu-item-71" class="menu-item-71">Why 123 Street Capital?</li>
<li id="menu-item-67" class="menu-item-67">What is Investor Relations?</li>
<li id="menu-item-74" class="menu-item-74">Our Values</li>
<li id="menu-item-77" class="menu-item-77">Our Team</li>
<li id="menu-item-81" class="menu-item-81">Our Partners</li>
</ul>
</li>
<li id="menu-item-133" class="menu-item-133">Services
<ul class="sub-menu">
<li id="menu-item-134" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-134">Overview</li>
<li id="menu-item-68" class="menu-item-68">Customer Relationship Management / Database Management</li>
<li id="menu-item-73" class="menu-item-73">Investor Relations</li>
<li id="menu-item-76" class="menu-item-76">Media Services
<ul class="sub-menu">
<li id="menu-item-66" class="menu-item-66">Publications</li>
<li id="menu-item-70" class="menu-item-70">Press Releases</li>
<li id="menu-item-75" class="menu-item-75">T.V. Interviews</li>
</ul>
</li>
<li id="menu-item-80" class="menu-item-80">Marketing / Branding</li>
</ul>
</li>
<li id="menu-item-79" class="menu-item-79">Clients</li>
<li id="menu-item-82" class="menu-item-82">Updates & Events</li>
<li id="menu-item-83" class="menu-item-83">Contact Us</li>
</ul>
</div>
</nav><!-- #access -->
</div>
</body>
</html>
------------- CSS CODE BELOW --------------------
a, a:link, a:active, a:hover {
color:#0085c5;
text-decoration:none;
}
#access {
display: block;
float: right;
margin-right:30px;
margin-top:7px;
}
#access ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2em;
padding: 0 1em;
text-decoration: none;
}
#access ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: white;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: white;
}
#access ul ul a:hover {
background: white;
}
#access ul li:hover > ul {
display: block;
}
body
{
background-image:url('/images/bg.png');
background-repeat:repeat-x;
font-family: 'Open Sans', 'Arial', 'Verdana', 'Tahoma', sans-serif;
font-size:13px;
color:#3e3e3e;
}
#access li {
text-align:center;
}
#access li a {
color:#5a5a5a;
font-size:13px;
font-weight:bold;
}
#access ul ul{
top:26px;
}
#access ul li a {
border-right:1px solid #0085c4;
}
#access ul li:last-child a {
border-right:none;
}
#access ul ul li a, #access ul ul ul li a {
border-right:none;
}
#access ul li a:hover {
background:#0085c4;
color:white;
}
#access ul ul li a {
border-bottom:1px solid white;
}
#access ul ul li {
margin-right:10px;
margin-left:10px;
border-bottom:1px solid #58595b;
}
#access ul ul li a {
width:145px;
}
#access ul ul ul li a {
width:100px;
}
#access ul ul li:last-child {
border-bottom:none;
}
#access ul ul li a:hover {
background:white;
color:#0085c4;
}
#access ul ul li:last-item a:hover {
border-bottom:1px solid white;
}
#access ul.sub-menu {
background:white;
}
#navcontainer {
width:960px;
height:39px;
background-image:url('/images/menushadow.png');
background-repeat:repeat-x;
}
Here is the fix to make your parent menus remain highlighted without using javascript.
http://jsfiddle.net/a3TS9/4/
To make parent menus highlight you need to have the :hover pseudo-class on the <li> element, not the <a> like so:
#access ul li:hover a {
background:#0085c4;
color:white;
}
Other changes were made but I only touched your css. You could clean your css up a little bit by adding some classes to your elements.
Related
<script>$(document).ready(function() {
$("#menu li a").on('click', function() {
var page = $(this).data('page');
$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
</script>
<script>$(function () {
$("#categories li, #bottom-page li").click(function (e) {
e.preventDefault();
$("#categories li, #bottom-page li").addClass("active").not(this).removeClass("active");
});
});
</script>
<script>
function goto($hashtag){
document.location = "store.html#" + $hashtag;
}
</script>
#categories {
font-size: 0;
width: 86%;
position: relative;
top: 0;
left: calc(50% - 43%);
float: left;
}
#categories ul li {
font-size: 16px;
background-color: #f1c96c;
text-align: center;
width: 32%;
margin-top: 3em;
display: inline-block;
}
#categories ul li:hover {
background-color: #f2e860
}
#categories ul li a {
color: #112c61;
font-size: .85em;
text-decoration: none;
padding: 1em 0;
display: block;
}
.nowrap {
white-space: nowrap;
}
.hide {
display: none;
}
li.active [data-page='category-1'] {
background-color: lavender;
}
li.active [data-page='category-2'] {
background-color: lavender;
}
li.active [data-page='category-3'] {
background-color: lavender;
}
#bottom-page {
font-size: 0;
width: 86%;
position: relative;
top: 0;
left: calc(50% - 43%);
float: left;
}
#bottom-page ul { float: right; }
#bottom-page ul li {
font-size: 16px;
cursor: pointer;
width: 60px; height: 40px;
display: inline-block;
}
#bottom-page ul li a {
font-size: .85em;
text-decoration: none;
text-align: center;
line-height: 1.4;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
}
#bottom-page ul li:hover { background-color: #f3efb4; }
<section id="categories"><div id="top"></div>
<div id="categories-line">
<ul id="menu" class="nowrap">
<li><a data-page="category-1" name="top" href="#">PRODUCTS <span>A - I</span></a></li>
<li><a data-page="category-2" name="top" href="#">PRODUCTS <span>J - R</span></a></li>
<li><a data-page="category-3" name="top" href="#">PRODUCTS <span>S - Z</span></a></li>
</ul>
</div>
</section>
<section id="bottom-page">
<ul id="menu" class="nowrap">
<li><a data-page="category-1" onclick="goto('top')">Page<br>1</a></li>
<li><a data-page="category-2" onclick="goto('top')">Page<br>2</a></li>
<li><a data-page="category-3" onclick="goto('top')">Page<br>3</a></li>
</ul>
</section>
I have a menu at the top of a page under my nav which separates products on the page alphabetically. This menu is made up of three tabs spanning the width of the page that go A-I, J-R, S-Z. Under the tabs are a bunch of products listed depending on which tab is chosen.
At the bottom of the page after the last product is a menu, the same as the top menu but styled differently i.e. Page 1, Page 2, Page 3. I would like to have Page 1, Page 2 and Page 3 correspond to the proper tab at the top when clicked. So that Page 1 and the first top tab are active and highlighted when either one, top or bottom, is clicked. Thank you for any help!
Your question is a lot to read, make it as short as possible.
If your code consists of HTML or CSS, it's better to use stack overflow's code snippets
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello!</h1>
<section>
<h3>Work</h3>
<ol>
<li>Technical Blogs</li>
<li>Front End Projects</li>
</ol>
</section>
</body>
</html>
I am trying to create a simple nav menu using flexbox. My issue here is that i want to position the li.dropdown-c to the right side of the menu using align-self. I have tried something but its not working. Can anyone tell me what is wrong?
<nav>
<div class="top">
<ul class="main-ul">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="dropdown-c">Four
<ul class="in-ul">
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS:
* {
padding:0px;
margin:0px;
}
body {
font-family: sans-serif;
color:lightcoral;
background:#506679;
}
ul {
list-style: none;
}
a {
color:grey;
padding:10px 20px;
}
.main-ul {
display: flex;
justify-content: flex-start;
}
li.dropdown-c {
display: flex;
align-self: flex-end;
}
The align-self property only works for the same direction as align-contents, not justify-content. Instead, put a margin-left of auto on the li.dropdown and that should work.
li.dropdown {
display: flex;
margin-left: auto;
}
Also after testing this in codepen, I realized you're not even selecting the li correctly. It has class dropdown-c, not dropdown:
li.dropdown-c {
display: flex;
margin-left: auto;
}
There are some similar problems here but none of the solutions fit my situation. I've got a nav that needs to be centered. There is a sub nav in a UL that needs to be left-aligned to its parent LI and laid out horizontally. When I float the sub nav LI's left, the UL keeps the width of its parent LI.
I'd set a fixed PX but the sub nav needs to be expandable so that the client can add or remove nav items and keep the layout.
Here is my HTML:
<nav>
<ul>
<li>Who We Are
<ul>
<li>Our Approach</li>
<li>What We Do</li>
<li>Leadership</li>
</ul>
</li>
<li>Our Results
<ul>
<li>Case Study A</li>
<li>Case Study B</li>
</ul>
</li>
<li>Our Experience
<ul>
<li>Category Experience</li>
</ul>
</li>
<li class="current">What We Think
<ul>
<li>Articles</li>
<li>Category Insight</li>
<li>Research</li>
<li>Training</li>
</ul>
</li>
<li>News
<ul>
<li>Press Releases</li>
<li>Articles</li>
</ul>
</li>
<li>Connect With Us
<ul>
<li>Join Us</li>
<li>Find Us</li>
</ul>
</li>
<li><div class="search"><input name="searchbox" type="text" id="searchbox" class="input_style" value="SEARCH" onFocus="if (this.value == 'SEARCH') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'SEARCH';}"><button></button></div></li>
</ul>
</nav>
Here is my CSS:
nav a,
nav a:visited {
color: #888888;
text-decoration: none;
display: inline-block;
line-height: 30px;
}
nav a:hover {
color: #CCC;
}
nav a:active {
color: #FFF;
}
nav {
text-align: center;
}
nav ul {
display: inline-block;
position: relative;
z-index: 597;
}
nav ul li {
float: left;
padding-left: 15px;
padding-right: 15px;
position: relative;
z-index: 599;
line-height: 30px;
}
nav ul li ul {
display: none;
}
nav li.current a {
background: url(../img/nav_arrow.png) no-repeat center bottom;
color: #FFF;
}
nav li.current ul {
display: block;
position: absolute;
z-index: 598;
top: 31px;
left: 1px;
width: auto;
}
nav li.current ul a {
background: url(none);
color: #888888;
}
nav li.current ul li {
float: left;
display: inline-block;
}
nav .search {
height: 18px;
width: 84px;
padding-left: 4px;
background: url(../img/search_bk.png) no-repeat;
margin-left: 20px;
margin-top: 5px;
float: left;
}
nav .search input {
height: 14px;
width: 68px;
float: left;
background-color: transparent !important;
border-style: none;
}
nav .search input.input_style {
font-family: "proxima-nova", sans-serif;
padding-top: 3px;
color: #777777;
}
nav .search button {
height: 11px;
width: 10px;
float: left;
background-image: url(../img/search_btn.png);
background-color: transparent;
border-style: none;
background-repeat: no-repeat;
margin-top: 3px;
}
Here is a screenshot:
My Screenshot
Thanks in advance!
Just make the width of the sub-menu UL something ridiculous like width:2000px instead of width:auto; this way the items can float horizontally in the sub-nav ul.
Commonly a website menu isn't going to exceed the width of the page area so why does it matter if the sub-menu UL has a excessively large width? It's only meant to house your li elements which will float above any content.
I use this: http://matthewjamestaylor.com/blog/centered-dropdown-menus
So my sub menu ul looks like;
#centeredmenu ul ul {
display: none;
float: left;
left: 0; // important to keep menu left aligned to parent li element>
position: absolute;
right: auto;
top: 2em;
width: 1000px; // set to whatever you want //
}
#centeredmenu ul ul li {
display: inline-block; // not really needed
left: 0; // important
}
I have a dropdown tab-style list, using Suckerfish Dropdown as a starting point.
When I hover over the level 1 tab, the second level anchor text displays on multiple lines, as if they are line breaks. This only happens in IE7, not in IE8/9 or FF.
Here's a screenshot:
http://i1200.photobucket.com/albums/bb333/MacGirl1986/DropDownIssue.gif
Heres the CSS:
#navWrap{
background-color:transparent;/*test color*/
overflow: visible;
padding: 0;
position:absolute;
right:100px;
top:0;
z-index:9000;
}
#tNav{font-size:13px;}
#tNav ul{
padding: 0;
margin: 0;
list-style: none;
font-size:13px;
}
#tNav li {/*Level 1 - horizontal menu*/
float: left;
border: solid 1px transparent;
position:relative;
}
#tNav a {/*level 1 text style*/
display: block;
padding: 3px 10px;
background-color:transparent;
font-weight:bold;
text-decoration: none;
}
#tNav a:visited, #tNav a:hover {
font-weight:bold;
color: #006400;
text-decoration:none;
}
#tNav li:hover ul {left: auto;}
#tNav li:hover {
border:solid 1px #ccc;
background-color:#fff;
z-index:1000;
}
#tNav li ul {/*level 2 container- Second Level List*/
list-style: none;
position: absolute;
width: 120px;
left: -999em;
background-color:#fff;
border: solid 1px #ccc;
margin-top: 0px;
margin-left: -1px;
}
#tNav li ul a, #tNav li ul a:hover{
border: none;
font-weight:normal;
text-decoration: none;
display:block;
}
#tNav li ul a:hover, *this is area that is going to new line in IE*/
#tNav li ul a:active,
#tNav li ul a:focus/{
color: #880000;
font-weight:normal;
text-decoration:underline;
display:block;
}
#tNav ul li { clear:both;}
#tNav li ul li:hover {
border:solid 1px #fff;
}
Heres the HTML:
s<div id="navWrap">
<ul id="tNav">
<li>Help
<ul class="level2">
<li>Help Center</li>
<li>Search Knowledge Base</li>
<li>Contact Support</li>
<li>Search Site Web Page</li>
<li>Browse FAQs</li>
</ul>
</li>
<li>Buyers
<ul>
<li>New Buyers</li>
<li>For Buyers</li>
<li>How To Buy</li>
<li>Buyer's Protection</li>
</ul>
</li>
<li>Sellers
<ul>
<li>New Sellers</li>
<li>For Sellers</li>
<li>How To Sell</li>
<li>Fees & Services</li>
<li>Join our Network</li>
<li>Sell an Item</li>
</ul>
</li>
</ul>
</div>
Just add a width to your nav links:
#tNav a {width:100px; }
The value used needs to be the width of the element (120px) minus the horizontal padding (10px left and 10px right) = 100px.
http://jsfiddle.net/5sZm9/
This problem only affects IE7. The hover effect works but when I attempt to hover over the sub-menu items, the menu suddenly disappears! Only, it's covered by the images in the header div. I've tried z-index and removing margin among other things but nothing works.
CSS
#menu-container{
background: url(../images/menu-bg.png) repeat-x;
height: 75px;
}
#menu{
width: 960px;
margin: 0px auto;
height: 75px;
border-left: 1px dashed #2a3f37;
}
#menu ul{
}
#menu ul li{
float: left;
line-height: 75px;
}
#menu a, #menu h2{
display: block;
}
#menu a{
text-decoration: none;
}
#menu a:hover{
color: #A00;
background: #fff;
}
#menu li{
position: relative;
z-index:2px !important;
}
#menu ul li a { /*stle for IE7*/
height: 1%;
}
#menu ul ul{
position: absolute;
top: 75px;
left:0px;
background: #000;
z-index:2px !important;
}
#menu ul li ul li a{
width: 175px;
height: 35px;
line-height: 35px;
}
#menu ul ul ul{
position: absolute;
top: 0;
left: 100%;
}
div#menu ul li ul li{
margin:0px;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
display: none;
}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
display: block;
z-index: 2;
}
HTML
<div id="menu-container">
<div id="menu">
<ul class="menu">
<li class=active>Home</li>
<li >Hearing
<ul>
<li>How You Hear</li>
<li>Hearing Test</li>
<li>Hearing Loss</li>
<li>Online Hearing Test</li>
</ul>
</li>
<li >Hearing Aids</li>
<li >Tinnitus</li>
<li >Patients</li>
<li >About Us
<ul>
<li>About Us</li>
<li>Top Ten Reasons</li>
<li>Our Staff</li>
<li>Our Location</li>
<li>Patient Forms</li>
</ul>
</li>
<li >Contact Us</li>
</ul><!--/menu-->
</div><!--/menu-->
</div>
<!--/menu-container-->
Ohhh such a rule there div#menu ul li:hover ul ul (and many others) are not treated by IE6 or IE7.
IE browsers until IE8 only manage :hover rules for link elements.
Check this tutorial where it's explained in detail the problem and the solution.
Good Luck!