I have a drop menu that works fine in Firefox and Chrome but not in ie. The sub menu appears underneath the main menu, but it displays sideways. How do I fix it?
The site url www.umvaonline.org
code for menu
<li class='top'><a href='blog/'>News/Blog</a>
<ul class='item'>
<li><a href='/blog/category/news/exhibition-listings/'>Exhibition Listings</a></li>
<li><a href='/blog/category/news/opportunities/'>Opportunities for Artists</a></li>
<li><a href='/blog/category/news/workshops-classes/'>Workshops & Classes</a></li>
</ul>
</li>
<li class='top'><a href='index.php?page=journal'>Quarterly Journal</a>
<ul class='item'>
<li><a href='index.php?page=submission'>Submission Guidelines</a></li>
<li><a href='/blog/category/archived-journals/'>Archived Journals</a></li>
</ul>
</li>
css
div.topnav { height:40px;margin-left:30px;margin-bottom:20px;}
div.topnav ul {z-index:10000;padding: 0 1px;
list-style: none;
position: relative;
top:0;
display: inline-table;}
div.topnav ul:after {
content: ""; clear: both; display: block;
}
div.topnav ul li {
height: 100%;
float: left;
font-family: arial, verdana, helvetica;
font-size: 95%;}
div.topnav a {
float: left;
height: 40px;
line-height: 40px;
text-align:center;
background-image: url('umva_images/umva_button.png');
padding-left:12px;
padding-right:12px;
background-repeat: repeat-x;
color: silver;
font-weight:bold;
text-shadow: 1px 1px black;
transition:color .25s ease;
text-transform:uppercase;
text-decoration:none
}
div.topnav ul.item{display:none}
div.topnav li.top:hover ul.item {display:block}
div.topnav a.left {border-top-left-radius:5px;border-bottom-left-radius:5px}
div.topnav a.right {border-top-right-radius:5px;border-bottom-right-radius:5px}
div.topnav a:hover { background-image: url('umva_images/umva_button_hover.png');color:white}
div.topnav a.current { background-image: url('umva_images/umva_button_hover.png');color:white}
div.topnav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
box-shadow:2px 2px 5px black
}
div.topnav ul ul li {
float: none;
position: relative;
}
div.topnav ul ul li a {
background: #5f6975;
color: #fff;
font-size:90%;
width:auto;
height:25px;
line-height:25px;
text-align:left;
}
div.topnav ul ul li a:hover {
background: #5f6975;
text-decoration:underline;
}
div.topnav ul ul li a {
}
div.topnav ul li.left {border-top-left-radius:5px; border-bottom-left-radius:5px}
div.topnav ul li.right {border-top-right-radius:5px; border-bottom-right-radius:5px}
You have to check out if this is working for you - add float:none; to div.topnav ul ul li a.
Just tested in IE10 and Firefox and works for me. Though there is no float set for this element, it inherits float: left from div.topnav a.
Related
I have a dropdown menu on my website, and its acting buggy, the dropdown works, but it shifts my whole website when its hovered over.
code pen http://codepen.io/anon/pen/uaFDj
#nav {
}
#nav {
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
padding: 0;
}
#searchbar input[type=text] {
background: none repeat scroll 0 0 #fff;
border: 1px solid black;
height: 25px;
padding: 1px 1px 1px 5px;
width: 230px;
}
#searchbar input[type="submit"] {
background: none repeat scroll 0 0 #1abc9c;
border: 1px solid #12ab8d;
color: white;
cursor: pointer;
font-size: 14px;
padding: 4px 15px;
}
#searchbar { margin-right:10px; }
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0 0 0 10px;
}
#nav ul li {
line-height:50px;
float:left;
}
#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul li a:hover {
background-color:#333;
}
#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}
li.active {
float: right !important;
}
li.active_messages {
float: right;
}
#nav ul>li:hover>ul {
top:initial;
}
my html
<div id="nav">
<ul>
<li>Home</li>
<li>Categories
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>About us</li>
<li>Profile</li>
<li>My Listings</li>
<li>Get Verified!</li>
<li>Log out</li>
<li class="active">
<div id="searchbar">
<form action="search.php" method="get">
<input type="text" hidden="" value="product/search" name="route">
<input type="text" required="" placeholder="Search..." name="search">
<input type="submit" value="Search">
</form>
</div></li>
</ul>
</div>
it only bugs when its in full screen without ay sidebar stroller. thanks for the upcoming help.
Thank you for the upcoming help and support from everyone.
Without even looking at your code I can tell you why. The width of the dropdown is moving some margin to the right causing the search bar and probably anything else underneath the dropdown to move right.
Just make a <ul> list-style-type: none; with <li> display: inline or block;
Also you're not setting a width to anything but the search bar, which might be another cause.
Try setting a width to your nav.
Hey now just define some css as like this
#nav ul li {
position:relative;
}
#nav ul > li ul{
display:none;
}
#nav ul li:hover ul{
display:block;
}
Give max width for #nav and width 100%
#nav{
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
max-width: 858px;
padding: 0;
width: 100%;
}
so that it won't move anymore.
DEMO
why are you giving top:100%;
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; display:none;
}
#nav ul>li:hover>ul {
display:block;
}
UPDATE : to keep a highlighted DEMO
#nav ul li:hover > a{
background-color:#333;
}
I am using the CSS :before pseudo-selector to create a block above the first item in a drop down list. I've been having trouble getting this block created with the pseudo-selector to be the same width as the <li> above it.
For example when you hover over "About" the pseudo block that appears beneath it should be the same width as the block that contains the word "About" and so on for the other 3 blocks.
Here's a fiddle to what I have got so far: http://jsfiddle.net/jh67P/
Here's my HTML:
<nav>
<ul class="main">
<li>About
<ul class="secondary">
<li>Learn About Us</li>
<li>Nice things to know</li>
</ul>
</li>
<li>Products
<ul class="secondary">
<li>Product One</li>
<li>Product Two</li>
</ul>
</li>
<li>Features
<ul class="secondary">
<li>Something Nice</li>
<li>Another nice thing</li>
</ul>
</li>
</ul>
</nav>
Here's the CSS:
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main li:hover ul:before {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
}
Edit: Using absolute positioning I was able to achieve the effect. Here's the updated CSS.
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
top:40px;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main > li:hover:after {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
position:absolute;
top:20px;
margin-left:1px;
}
How about changing:
.main li:hover ul:before {
To:
.main > li:hover > a:after {
Is that what you are after?
jsFiddle
I need to modify this pure css dropdown menu to be a dropup. Saw a similar post, but can't seem to modify mine. Here is the css code being used for the dropdown, which is working as expected. I tried using bottom: 100% within ul.drop li.hover, ul.drop li:hover {, but that didn't work. Any suggestions.
HTML
<body>
<ul id="nav" class="drop">
<li>Home</li>
<li>Portfolio
<ul>
<li>Horses
<ul>
<li>Horses 1
<li>Horses 2
<li>Horses 3
</ul>
</li>
<li>Dogs</li>
<li>People</li>
<li>Stills</li>
</ul>
</li>
<li>Order</li>
<li>Contact Me
</li>
</ul>
</li>
</ul>
CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
width: 130px;
text-align: center;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px solid #ffffff;
padding: 0px 0px 0px 0px;
background: transparent;
# margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: transparent;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
width: 160px;
text-align: left;
}
li:hover a { background: transparent; }
li:hover li a:hover {
background: #3ba110;
}
ul.drop a {
display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #1302CB; color: #fff;
}
ul.drop {
position: relative; z-index: 597; float: left;
}
ul.drop li {
float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative; z-index: 599; cursor: default; background: #3ba110;
}
ul.drop ul {
visibility: hidden; position: absolute; bottom: 100%; left: 0; z-index: 598; width: 160px; background: #cccccc; border: 1px solid #fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px; left: 100%;
}
ul.drop li:hover > ul {
visibility: visible
}
I didn''t use your CSS because I am not sure what is going on without HTML. Anyways I created a basic demo of what I think you are trying to accomplish.
http://jsfiddle.net/krishollenbeck/JgWEL/45/
HTML
<div class="page">
<ul>
<li class="navlink">
MENU ITEM:
<ul class="dropmenu">
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</li>
</ul>
</div>
CSS
.page {
width:200px;
height:100px;
position:fixed;
top:50%;
bottom:50%;
}
.dropmenu {
display:none;
border:1px solid #CCC;
background-color:#eee;
width:150px;
padding:5px;
position:absolute;
top:-70px;
}
.navlink {
background-color:#000;
padding:5px;
}
.navlink > a {color:#FFF;}
.navlink:hover > .dropmenu {display:block;}
In the following example - Is it possible to retain the border on the top level navigation when hovering on the sub elements? I would like to retain the black border on 'About Us' when hovering on its sub items. Example: http://jsfiddle.net/6zKRC/2/
HTML
<div class="navigation">
<ul class="navigation fc">
<li>
Home
</li>
<li class="">
About
<ul>
<li>
Sub Navigation 1
</li>
<li>
Sub Navigation 2
</li>
</ul>
</li>
</ul>
</div>
CSS
.navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul li {
display: block;
position: relative;
float: left;
}
.navigation li ul {
display: none;
}
.navigation ul li a {
display: block;
text-decoration: none;
color: #000;
font-weight:bold;
padding: 5px 15px 5px 15px;
white-space: nowrap;
}
.navigation ul li a:hover {
background: #CCC;
color:black;
border:solid 1px black;
border-bottom:0;
}
.navigation li:hover ul {
display: block;
position: absolute;
border:solid 1px black;
border-top:0;
}
.navigation li:hover li {
float: none;
font-size: 11px;
}
.navigation li:hover a {
background: #CCC;
}
.navigation li:hover li a:hover {
background: #CCC;
border:0;
}
Hi i have made some changes in your css please check your updated css :-
CSS
.navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul li {
display: block;
position: relative;
float: left;
}
.navigation li ul {
display: none;
}
.navigation ul li a {
display: block;
text-decoration: none;
color: #000;
font-weight:bold;
padding: 5px 15px 5px 15px;
white-space: nowrap;
}
.navigation ul li:hover {
background: #CCC;
color:black;
border:solid 1px black;
border-bottom:0;
}
.navigation li:hover ul {
display: block;
position: absolute;
border:solid 1px black;
border-top:0;
left:-1px;
}
.navigation li:hover ul li {
float: none;
font-size: 11px;
background: #CCC;
}
.navigation li:hover li:hover {
background:#e6e6e6;
border:0;
}
HTML
<div class="navigation">
<ul class="navigation fc">
<li>
Home
</li>
<li class="">
About
<ul>
<li>
Sub Navigation 1
</li>
<li>
Sub Navigation 2
</li>
</ul>
</li>
</ul>
</div>
I hope you looking this one:- http://jsbin.com/uwemuy/5/edit
change in css as follow
.navigation li:hover a {
background: #CCC;
border:solid 1px black;
}
see http://jsfiddle.net/6zKRC/2/
I have tried moving the position:relative; setting around, but to my understanding it is where it is supposed to be... Please correct me, because my understanding is clearly wrong!
<ul id="menu">
<li>All Products
<ul>
<li>Stock Lanyards</li>
<li>Screen Printed Lanyards</li>
<li>Full Color Lanyards</li>
<li>Custom Cord Lanyards</li>
<li>Specialty Lanyards</li>
</ul>
</li>
<li>Reorders</li>
<li>Resources
<ul>
<li>FAQ</li>
<li>Art Requirements</li>
<li>Production Times</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Request A Sample</li>
</ul>
</li>
<li>Blog</li>
</ul>
css....
ul#menu {
margin:0px;
padding-top:20px;
position:absolute;
right:0px;
font-weight:bold;
font-size:14px;
}
ul#menu li {
display:inline;
padding-left:8px;
}
ul#menu a{
color:#8ba693;
text-decoration:none;
padding:5px;
}
ul#menu a:hover, a:active{
/* text-shadow: 0 0 0.9em #ccc;
text-decoration:underline; */
background-color:#000;
}
/* -- DROPDOWN MENU STYLES -- */
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: block;
position: relative;
left:0;
top:100%;
}
#menu li ul { display: none;
position: absolute;
z-index:1000;
margin:5px 0 0 0px;
top:100%;
left:0;
}
#menu ul li a {
display: block;
text-decoration: none;
padding: 7px 15px 6px 10px;
margin: 0px 0 0 0;
white-space: nowrap;
border-top: 1px solid #8ba693;
border-left: 1px solid #8ba693;
border-right: 1px solid #8ba693;
}
#menu ul li a:hover { background: #000; }
#menu li:hover > ul {
display: block;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #fff; }
#menu li:hover li a:hover { background: #8ba693; color: #fff; }
ul#menu li {
display: inline;
padding-left: 8px;
position: relative;
}
http://jsfiddle.net/HFp6K/2/
position:relative needs to be in position:absolute's parent.