Styling clickable elements in a menu using CSS

Hello everyone! I'm currently working on styling my very first website and I've run into an issue with my secondary menu. Right now, only the text is linked and I need to change it so that the entire list item acts as a link.

I'm looking to achieve this using CSS only, not Javascript.

You can view the live version of my website here: (you'll notice multiple submenus, all styled with the same CSS / HTML).

HTML:

    <nav class="submenu"> 
      <ul>
        <li><span class="text"><a href="#">GAME SERVERS </a></span><span class="arrows"></span></li>
        <li><span class="text"><a href="#">BAN LIST  </a></span><span class="arrows"></span></li>
        <li><span class="text"><a href="#">UNBAN REQUESTS  </a></span><span class="arrows"></span></li>
        <li><span class="text"><a href="#">ADMINS </a></span><span class="arrows"></span></li>
      </ul>
    </nav>

CSS:

.submenu{
    color: #1a6eb6;
    display: inline-block;
    height: 50px;
    width:780px;
}

.submenu ul {
    margin-left: 20px;
    padding-left: 0px;         
}

.submenu ul li{
    list-style-position: inside;    
    list-style-type: none;       
    background-image: url("images/shop_menu_bg.png");
    background-repeat: repeat-x;
    height: 38px;
    width: 187px;
    display: inline-block;
    color: #1a6eb6;         
}

.submenu ul li:hover {
    background-image: url("images/shop_menu_bg_hover.png");
    width: 187px;
    height: 38px;             
}

.submenu ul li .text{
    color: #1a6eb6;
    display: inline-block;
    height: 31px;
    width:115px;
    line-height: 28px;
    margin-left: 5px;         
}

.submenu ul li .arrows{
    background-image: url("images/arrows.png");
    background-repeat: repeat-x;
    display: inline-block;
    height: 17px;
    width: 14px;
    margin: 0px 0px 0px 45px;
    vertical-align: middle;       
} 

.submenu ul li:hover .arrows{
    background-position: -3px -14px;         
}

Can anyone provide some guidance on how to accomplish this?

p.s. Thank you for taking the time to read this post :)

Answer №1

To enhance the appearance of your CSS, consider using the code snippet provided below. Begin by adjusting the width of span.text to 100%, followed by positioning the arrows span with position: absolute. Finally, set their parent element to position: relative, which should resolve any display issues.

.submenu ul li {
background-image: url("images/shop_menu_bg.png");
background-repeat: repeat-x;
color: #1A6EB6;
display: inline-block;
height: 38px;
list-style-position: inside;
list-style-type: none;
position: relative; /* Add this for correct placement */
width: 187px;
}
.submenu ul li .text {
color: #1A6EB6;
display: inline-block;
height: 31px;
line-height: 28px;
margin-left: 5px;
position: relative; /* Include this for proper z-index */
width: 100%; /* Ensure full width is utilized */
z-index: 3; /* Maintain correct stacking order */
}
.submenu ul li .arrows {
background-image: url("images/arrows.png");
background-repeat: repeat-x;
display: block;
height: 17px;
margin: 0;
position: absolute; /* Adjust position accordingly */
right: 10px; /* Positioning guidance */
top: 6px; /* Refine vertical alignment */
vertical-align: middle;
width: 17px;
z-index: 2; /* Improve z-index ordering */
}
.submenu ul li .text a {
color: #636363;
display: block; /* Enhance display formatting */
width: 100%; /* Utilize full width for better visibility */
}

Answer №2

To adjust the layout, make sure to enclose both the text and arrow within your hyperlink, as shown below:

<li><a href="#" style="display:block"><span class="text">DISCUSSION FORUM </span><span class="arrows"></span></a></li> 

Then add this styling for 'li a':

.submenu ul li a{display:block}

This should solve the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An H1 tag that has a class will take on the attributes of the h1 heading

During my CSS practice, I encountered some confusion regarding Class Selectors. Specifically, I had styled a H1 tag and then applied additional styles to a H1 tag with a class. To my surprise, the H1 tag with a class was inheriting properties from the orig ...

$_POST['submit'] is failing to trigger when the button is clicked

Can you help me troubleshoot the code below? It should echo when a user clicks on "more", but I can't seem to find the issue. Any assistance would be greatly appreciated. if (isset($_POST['more'])){ echo <<<saveNewFactor ...

"Expand" Button following X buttons

Check out this JSFiddle for the code: $(document).ready(function(){ $( ".keywordsdiv" ).each(function(){ $(this).children(".keywords").eq(3).after('<a href="" id="playtrailershowmorebuttons">....Show More</a>');//add a uniq ...

When placed within a <li> element, the <a> tag will not create a hyperlink to a page, but it will

I have encountered an issue with my anchor links. All of them are working properly except for the one in the second ul with an href="page1". Interestingly, the link shows the correct destination at the bottom left of my screen and works when I right-click ...

Load a page from a different domain using uframe

Looking for a solution to successfully load an external URI using uFrame. Currently encountering an "Access Denied" issue when attempting to do so on Firefox. Any suggestions? ...

The shadow effect of CSS applied to a div is obscured by surrounding div elements

I need help with a design issue. I have two boxes stacked vertically, and I want the top box to have a shadow on its bottom edge. However, the shadow is currently hidden behind the bottom box. Does anyone know how to solve this problem? ...

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

Utilizing jQuery to Toggle Visibility of Table Rows on Button Click

I have a unique layout on my page where there are two tables positioned side by side. The table on the left consists of buttons with company names, and the table on the right should display employees associated with each specific company. Upon initially l ...

Creating a dynamic CheckBox in an ASP.NET 2.0 GridView to extract values

After creating an asp page, I added a GridView with a text column and dynamic checkboxes in n columns. <asp:GridView ID="gridAssetto" runat="server" Width="100%" GridLines="Vertical" SkinID="grdRegular" ...

Transform jQuery timer functionality to support both minutes and seconds for redirecting, rather than just seconds

Recently, I stumbled upon a fantastic timer and redirect script based on jQuery from the talented folks over at the 'jQuery by Example' website. This script automatically redirects users after a specified number of seconds has elapsed: Here&apos ...

Creating a flexible grid layout with DIVs that share equal width dimensions

Struggling with my HTML and CSS code, I need a way to structure nested DIV blocks into a responsive grid where each block has the same width. Despite my efforts, nothing seems to work as expected. Currently, the nested DIVs are stacked vertically one on to ...

Tips for zooming out a Bootstrap 4 table

I am working with a bootstrap table that looks like this: <div class="table-responsive"> <table> .... </table> </div> Current display on mobile: https://i.sstatic.net/6b6qa.png desired display on mobile: https:// ...

Is it possible to enhance the GamepadAPI's functionality?

I've been working on enhancing the built-in GamepadAPI by adding custom controller code. With TypeScript, I created a basic function to trigger a "gamepadconnected" event. // emulate gamepadconnected event function dispatchGamepadConnectedEv ...

initiate changes to the application's style from a component nested within the app

I'm looking to update the background color of the entire page, including the app-nav-bar, when I'm inside a child component. When I navigate away from that component, I want the default style to be restored. Any suggestions on how to achieve this ...

Checkboxes within Angular's reactive forms are a powerful tool for creating dynamic user

Currently, I am working on a contact form that includes checkboxes for users to select multiple options, with the requirement of selecting at least one box. My challenge lies in figuring out how to pass all the selected checkboxes' data to an API usin ...

Firefox not supporting position fixed within relative parent

Two columns are displayed here, with the left column showing a list and the right column displaying information based on the selected element from the list. Due to the large size of the list, I implemented a feature where the right column stays fixed at t ...

The Tailwind CSS class "ring-inset" does not appear to be appearing on iPhone devices when applied to form inputs

I have implemented custom styling for form inputs in my Next.js project using Tailwind CSS classes. Below is the code snippet that showcases how I have styled the form inputs: import * as React from "react"; import { cn } from "@/lib/util&q ...

Efficiently verifying elements within an array

I have a roster of students categorized based on their activity status - some are active, while others are inactive. var allActive = [{id: 1, active: true}, {id: 2, active: true}, , {id: 3, active: true}]; var someNot = [{id: 4, active: true}, {id: 5, act ...

The current HTML scraping results are showing a variation in numbers

I recently created a code to extract the price of a mutual fund into an excel sheet using VBA. It was working perfectly fine until last night when it suddenly started pulling in a different number, specifically the % return on the Dow at the top of the pag ...

Dropdown list remains open despite a selection being made

My problem arises when I attempt to select an item from the list, as the dropdown menu does not populate automatically and the list remains open. Here is the HTML code for the dropdown list: <label id='choose' for='options'>Sele ...