I'm making a pure css dropdown menu (code here: http://jsfiddle.net/SeXyv/7/ ) and I would like to have a border only around the outside and not in between items.
The issue I am having is the border between the "topic" and "subtopic 1" in the js.fiddle example. I can get a border all the way across between the two, but I only want it on the top right portion as an outline, not directly between the two links (where the gold and gray meets)
Can anyone help me out here?
Thanks
EDIT: here is a pic of what I would like the border, the part circled in red, with the border stopping once it reaches the tab above it:
http://tinypic.com/view.php?pic=300ehxt&s=6
Basically you put a bottom border on the last element in the dropdown menu and a top border on the first element, then let the element that triggers the dropdown menu have a higher z-index than the menu, then push the menu up the width of the menu
#menu li:hover a {/*increace the z-index over that of the menu*/
...
position:relative;
z-index:5;
}
#menu li:hover li:first-child a{/*first menuitem gets a top border */
border-top:2px black solid;
}
#menu li:hover li:last-child a{/*last menuitem gets a bottom border */
border-bottom:2px black solid;
}
#menu li:hover ul{/* move up menu to cover up part of top border*/
position:relative;
top:-2px;
}
http://jsfiddle.net/SeXyv/14/
add <li style="z-index: 5"><a href="#" class="bordertest" >Topic</a> to your HTML.
And add the required class.
Working fiddle here
Adjust the corners etc.
Related
First of all i would like to add that its been a while, about 3 years, since i've developed a dropdown menu in CSS. I have this drop down menu, but i have the following issue. apparently i cannot override properties of li/a elements of my submenu.
I would like to make the font color of submenu's li's a elements same as color of menu's ul's li's a elements, which is light grey ( rgb(206,206,204) )
Could somebody please take a look and point me at what i am doing wrong? Here's a link to a source code archive with html, css and background images:
http://www.filedropper.com/001_17
Your problem is in this rule:
div ul.menu li:hover a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
With that rule all <a>'s in that <li> turn white. What you need to do is have only the direct children turn white:
div ul.menu li:hover > a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
JSFiddle Demo
I have given a right-border (1px solid #000) to menu1 here and a left-border to menu2.
The problem is that that way the dropdown menu takes on the attributes of the main menu and has only a right border.
How can I
1) have no border at all on the dropdown menu?
2) have the dropdown menu with borders? (top, left, right and bottom)
Here is the menu: http://jsbin.com/tifuhute/30/
You can use jQuery to change the border functionality. I would suggest you to use the addclass function and removeclass function in jQuery.
Learn how to use them below:
http://www.w3schools.com/JQuery/html_addclass.asp
http://www.w3schools.com/jquery/html_removeclass.asp
1: Since it appears the links are the ones with the border, you can add this css rule to the menu1 so that the links in the dropdown menus do not have the border:
.menu1 ul a{
border: none;
}
2: I'm not sure what you want. If you want the whole dropdown menu with borders, you can add this css rule, for example:
.menu1 ul{
border: 1px black solid;
}
I tried these css rules and they appear to be working fine
I am using WordPress twentyeleven theme and developing my custom theme. The live demo of the site can be seen here. In that site you can see there are two types of menus. On the left and another one in the right side. In the right side menu you can see there is a drop-down menu.Here when you will hover on the parent menu drop down box will come but there is one problem with this. When you will hover on the parent menu the drop-down menu can be seen but with the arrow on the right side. So here I want there should be no arrow images on the sub menus when I will make hover on the parent menu. Can someone tell me how to do this?
I am really stocked with this point.
Define your child a span background-image:none;
Add this css
#access #header-right-menu ul li:hover ul a span {
background-image: none;
}
I think you should add !important after background-image: none;
#access #header-right-menu ul ul li a span {
background-image: none !important;
}
I am working on a navigation which can be seen here: http://jsfiddle.net/ybvF4/
I'm sure it is against policy to ask two questions in one but my fear is that if I do the solutions may not work together.
The two things I'd like to achieve are:
when the drop down menu is hovered I'd like the title line items ("sui generis" and "reclaimed wood") to have a green background, as they do now, but that fills up to the height of the solid outline that surrounds the navigation.
When hovered I'd like the text in the title list item elements to be white, without losing the effect of the current gray color hover state of the sub line items in the list.
I hope I have made this clear it's pretty tricky to describe in text, please see the jsfiddle link
thanks for any help
when the drop down menu is hovered I'd like the title line items ("sui
generis" and "reclaimed wood") to have a green background, as they do
now, but that fills up to the height of the solid outline that
surrounds the navigation.
Remove this:
nav .navigation {
padding-bottom: 5px;
padding-top: 5px;
}
Then, on .navigation li a, add display: block to allow the padding: 5px; to work as expected.
http://jsfiddle.net/thirtydot/ybvF4/1/
When hovered I'd like the text in the title list item elements to be
white, without losing the effect of the current gray color hover state
of the sub line items in the list.
Add this:
.navigation > li:hover > a {
color: #fff;
}
http://jsfiddle.net/thirtydot/ybvF4/3/
Of course, then the menu items that don't have a submenu have a white background and white text on hover. I assume that's intentional due to the last rule in your CSS.
this is the link for the navigation that i am having a problem
http://www.3dghosting.com/mucci-navigation/
the icon on the second drop down menu will disappear when i mouse-over on the second drop down
can anyone help me with this?
this is the code
#navigation-main li:hover ul li.tomatoes a:hover{
background:#737475 url(images/navs/tomatoes.png) no-repeat;
background-position:left;
color:#fff;
}
You have the background image being set on :hover. Therefore when the mouse is moved to the second menu, the image disappears. Instead style the container, but have it hidden by default and then when hovering, have it displayed