Just trying to imitate an effect you can find here: (https://www.gaastrastore.com/en-de/men):
(top menu, mouse over on the list items, entry moves to the right and gets two arrows in the front)
I'm trying to get those two arrows working. I got the move to the right working. The arrows I tried to get going using transition and font-size from 0px to 10px. Any ideas? I'd like to stick with CSS if possible.
Cheers
Instead of using font-size to increase from font-size 0px to 10px, you can use margin-left to hide and show span tag on which you are adding that transition as below,
ul {
padding: 0;
margin: 40px;
overflow: hidden;
}
ul > li {
list-style-type: none;
}
ul > li > span {
margin-left: -10px;
transition: 0.5s ease;
}
ul > li:hover > span {
margin-left: 0px;
}
<ul>
<li><span>></span> Home</li>
<li><span>></span> About</li>
<li><span>></span> Contact</li>
</ul>
Related
StackOverflow Community!
I have a problem with my Website where I am hovering over an item on my navigation bar, and it doesn't cover the full spot I intend for it to cover. For those moderators who keenly notice that this question is answered Here and Here as well, it isn't applicable in my situation since one is a span tag, and the other is a vertical dropdown, not a horizontal navigation bar. Attached below is a screenshot of the problem.
The effect I intend is to get the background right to the edge of the top and bottom, and pushing the background to the edge of the right and left
I've tried playing around and looking online, but the answer that is most consistent is:
Use display: block
Which would mess up the flow of the navigation bar if I were to implement it. Can someone point me in the right direction?
CSS used to style the nav bar and it's elements:
nav {
text-align: center;
background-color: black;
}
nav ul {
list-style-type: none;
padding: 10px;
}
nav li {
display: inline-block;
transition: background-color 0.3s ease-in-out 0s;
}
nav li:hover {
background-color: lightgrey;
}
nav a {
text-decoration: none;
color: white;
}
NOTE:The issue is with me adding some padding to the ul element, I understand that. I am just not sure how to circumvent it without screwing the navigation bar
Just put the padding on the li instead.
nav {
text-align: center;
background-color: black;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
transition: background-color 0.3s ease-in-out 0s;
padding: 10px;
}
nav li:hover {
background-color: lightgrey;
}
nav a {
text-decoration: none;
color: white;
}
<nav>
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
</ul>
</nav>
So I have an unordered list with custom bullet images. They are triangles pointing to the right at the list. I would like the point to be aligned with the vertical center of the first line of text in the list item. How can I achieve this?
This is what I am currently viewing:
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
main ul {
list-style-image: url(../img/bullet.png);
margin-top: 25px;
}
main ul li {
line-height: 35px;
}
The line-height doesn't seem to do anything.
you can use pseudo-element before \ after instead, take a look at this example below:
main ul {
margin-top: 25px;
}
main ul li {
list-style: none;
}
main ul li:before {
content: url("http://www.milksmarter.co.nz/images/basement_platform/grey_triangle_bullet_point_large.png");
position: relative;
top: 10px;
left: -10px
}
<main>
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
</main>
It's really hard to actually provide you with finalized code without access to your image, but try merging the following code with your own. The first Padding value (currently 3px) should be the item you need to update.
li {
background: url(images/bullet.gif) no-repeat left top;
padding: 3px 0px 3px 10px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
src: Adjust list style image position?
My Dropdown-Menu Background only appears when hovering over the Dropdown sites, but I want it to appear all the time.
My Site is: http://bellezza-ribelle.blogspot.de/
There are Dropdowns on "Meine Bücher", "Rezensionen" and "Challenges" but the background only shows on the first Dropdown-Tabs, which makes it difficult the read the other ones, if you don't hover over them.
How can I make the Background appear on the drop-down-tabs with only hovering over die "Main"-Tabs (Meine Bücher, etc.)?
Add this to your CSS:
#nav1 ul ul li {
background-color: #f3f3f3;
}
You can also have more "air" by using padding for the li:
#nav1 ul ul li {
background-color: #f3f3f3;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
Looks like you might have a little issue with your max-height # .tabs-inner .widget ul on Line 255. Maybe setup a different max-height on :hover?
Basically, I have this website:
http://www.ug.it.usyd.edu.au/~sgre9702/week3/dropDownMenu/semantics.html
I want to centre the drop-down list items on the nav-bar, I know I can centre it with:
left:-11px;
However, I don't want to use a value I have calculated. Instead I would like it to automatically centre, taking the margin/padding values into consideration. I don't know if this is possible after googling around a bit.
My related HTML code is:
<nav>
<ul id="nav">
<li>Tours
<ul>
<li>New South Wales
<li>Australian Capital Territory
<li>Queensland
<li>Western Australia
<li>Northen Territory
<li>Tasmania
<li>South Australia
<li>Victoria
</ul>
<li>Attractions
<li>Food
<li>Resources
<li>About
<li>Contact
<ul>
<li>Online
<li>Phone
<li>Facimile
</ul>
</ul>
</nav>
The related CSS:
/* general nav list */
nav ul li {
background-color: #EEEEEE;
border-color: #000000;
border-style: solid;
border-width: 1px;
display: inline-block;
margin: 0px 5px;
padding: 5px;
position: relative;
text-align: center;
width: 120px;
}
/* nav sub list */
nav ul li ul {
display: none;
}
/* nav sub list shown */
nav ul li:hover ul {
display: block;
width: 142px;
position: absolute;
list-style-type: none;
}
/* nav sub list shown - list item */
nav ul li:hover ul li {
display:block;
background-color: #AACCFF;
border: solid 1px #000000;
position: relative;
/*left:-11px;*/
}
Remove the padding from the ul>li elements and apply to the anchors themselves (they will need display:block). Remove the margins from the sub-li elements
Then give the child ul width: auto. The submenu block will still be offset 1px to the right, though, as it will takes its left edge from where its parent's left border ends. You can get around that by either replacing the borders without outlines (which don't effect the widths of their host elements), putting borders on the child anchor/li elements or finally trying a left:-1px value on the child UL.
I'm trying to create a hover effect for the whole anchor element but it's not working, as soon as the mouse is out of the text the drop down menu disappears:
Here is the test site.
Css:
.menu{}
.menu li{float:left;margin-right:24px;list-style-type:none;height:46px;}
.menu li a{width:100%;text-transform: uppercase;color:#39444A;text-decoration:none;font-weight: bold;font-size:18px;display:block;height:46px;}
.menu li a:hover{border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #E87D05;color:#E87D05;height:46px;display:block;}
ul.sub_navigation , .sub_navigation
{
position: absolute;
display: none;
z-index: 100;
background-image: url('/images/menu-bg-png.png');
background-repeat:repeat-y;
padding:10px 0px 10px 28px;
}
Where am I getting it wrong?
CSS ( add ):
.menu li a {
position: relative;
z-index: 5;
}
In your case is because the div #slider-container is overlaping the #header div. I see that the #slider-container is absolute.
In this case you can add extra 20 - 30px on the TOP property and get rid of the padding-top.
The other thing to do is just to add position:relative and z-index:10 (for example) on the #header div
Try this:
.menu > li:hover .sub_navigation {
display: block;
}
the anchor elements have the size of the text and nothing else.
The space between link and link is the right margin of the li.
remove
li {margin_right: 40px}
and set
a {padding_right: 40px}