Hey there! I'm currently working on a new menu design using UL and LIs elements.
I would really appreciate some advice on how to add lines after each LI and properly indent them with the specific bullet image I have chosen.
If you're interested in checking out the code for the menu I'm using, here's the link:
Additionally, I've attached an image of the menu design below:
Hey there! Want to create a stylish navigation menu using only CSS?
Here's an example:
HTML
<ul class="navi">
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
</ul>
CSS
ul.navi{
margin:10px 0 0 10px;
width:300px;
}
ul.navi li{
background:#1f1f1f;
display:block;
position:relative;
}
ul.navi li:after{
position:absolute;
content:"";
left:0;
right:0;
bottom:0;
border-bottom:solid 1px #2a2a2a;
border-top:solid 1px #171717;
}
ul.navi li:last-child:after{
position:absolute;
content:"";
left:0;
right:0;
bottom:0;
border:0;
}
ul.navi li a{
display:inline-block;
font-size:14px;
color:#989898;
line-height:45px;
text-decoration:none;
margin-left:20px;
}
ul.navi li a:hover{
color:#fff;
}
Check out the live demo here http://jsfiddle.net/rohitazad/8abUy/4/
I'm facing an issue with changing CSS using jQuery. The specific CSS line I want to modify is: .switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside { top: 40px; } My attempt at changing it looked like this: $('.switch-vertic ...
My hosting for the website is with bluehost, and interestingly when viewed on Chrome, everything appears perfect. However, upon switching to Safari, I noticed that the background of the about me section is not black as intended, and the footer seems to be ...
I am currently working on creating buttons similar to the design shown in the image below. https://i.sstatic.net/hMqHs.png I have utilized stacked Font Awesome icons to place the icons atop a circle, resulting in this look: https://i.sstatic.net/rtEkP.p ...
Looking to create a website with a gallery block but running into some issues. I only want to utilize Bootstrap along with my custom CSS for the finishing touches. The layout should consist of 2 squares next to each other, with the left square being 2 colu ...
Hey there, I'm having an issue centering my image when I add instructions for it to tilt on mouseover. If I take out the 'tilt pic' div, the image centers just fine. Can anyone help me identify what I might be doing wrong? Thanks in advance! ...
My CSS seems to be causing some trouble as the DIVs are not aligning as they should. Instead, they are just wrapping around the text and not adjusting the page layout properly. Here is an example of my CSS: body { height: 95%; width: 100%; ma ...
import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...
My code currently enables a crosshair function, but I am looking for a way to limit the highlight effect only within the cursor (hover) area. Instead of highlighting in a "cross" shape, I would like it to show a backward "L" shape. This means that the hig ...
We have integrated FontAwesome with Bootstrap on our website. However, we encountered an issue when using FA with a custom minifier as it tries to load fonts from a relative path, leading to a 404 error due to the structure of the minified URL. To address ...
Initially, there was a smoothly working "like button" with the following appearance: <a href="javascript:void();" class="like" id="<?php echo $row['id']; ?>">Like <span><?php echo likes($row['id']); ?></span ...
I am currently attempting to assign a background color to a specific style of pop-up, but whenever I use a value that includes an alpha channel, it ends up being transparent. This is the CSS code I have been using: --color: 255, 144, 106, 0.18; background ...
Currently, I am in the process of developing a tooltip feature. This function involves adding a div with tooltip text inside it to the element that is clicked. However, I am facing a challenge in positioning this element above the clicked element every tim ...
Is there a way to adjust the brightness without turning the image grey? I've been attempting to do so, but only managed to change it to greyscale. My objective is to increase and decrease the brightness of the image. Here is the current code: HTML ...
I have a code snippet below for an info box I am working on. How can I adjust it so that when I hover over it, the green background fills the entire height instead of just 3/4 of the height? Any guidance on what may be causing this issue would be greatly ...
How can I set an equirectangular projection like the one in this example http://bl.ocks.org/mbostock/3757119 as a background for only the chart above the X-axis? Alternatively, is it possible to use an image of a map as a CSS background instead? .grid . ...
Trying my hand at teaching myself jquery and creating a decent layout. I believe what I have done is acceptable, but I still have some questions. This is my first attempt at jquery without copying someone else's work. I've aimed to keep it relev ...
I've been working on a tooltip feature that displays data in a message box when hovering over an icon based on its attribute. The following code is implemented for the mouseenter event. <span class='csTip fa fa-info-circle' csTipTerm=&a ...
Here is the code snippet that I am currently working with: <div id="images" class="img"/> <img src="spiderman.png" alt=""/> <img src="superman.png" alt="" height="25%" width="25%"/> <img src="batman.png" alt="" /> </div> ...
Could anyone help me with creating a navigation-bar effect similar to the one seen on ? I want the bar to shrink and the logo to change after scrolling down my page. My website is built using bootstrap 3. Is there a simple way to achieve this effect with ...
After clicking on the element I've set as the trigger for slideToggle, it moves a few pixels to the right without any apparent cause. It seems like there might be an issue with the CSS, but I'm having trouble pinpointing the exact problem. You c ...