Style dropdown menu with CSS

Hello,

At first check if your custom CSS class is applied correctly on AngularJS element.

Please follow these steps :

1. In Vuforia Studio, in a test Project, add Widget needed. In your case the Select Widget
2. Run Preview
3. Press F12 in keyboard to open Developer Tools
4. In Elements, select Tool to inspect elements
5. In Preview window move mouse cursor hover Select Widget and its sub components.
6. We can see CSS class to override to have custom properties

At second, override CSS classes needed.

Best regards,

Samuel

Hi @LS_9776545,

I checked the guide link what your mentioned in your post: https://www.w3schools.com/css/css_dropdowns.asp

I think this could not work because it is css definition regarding to specific html definition

<div class="dropdown">
 <span>Mouse over me</span>
 <div class="dropdown-content">
 <p>Hello World!</p>
 </div>
</div>

we can see -> there are required 2 classes to get the desired behavior and this is not directly applicable for a  widget - where we used only one CSS class definition.

If we change it to something like:

.dropdown:after {
 position: relative;
 display: inline-block;
 content:"Button1"
}


.dropdown:hover:after{
 content:'HOVER ACTION DONE on Button1';
}

.dropdown:hover {
 
 position: relative;
 left: 15px;
 top:20px;
 border: 3px solid #73AD21;
 background-color: #f9f9f9;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
 padding: 55px 55px;
 z-index: 1;
}

It is not  perfect but should display the principle

You need in this case only one css defintion class what you can set to the class property of the button widget. Here it adds also the text - the Button Text property is empty:

Short remark – the however event is working on tablet e.g. IPad but it is not a real event intended for this device – is some thing more for device with mouse. But in generally it work. When you tab on the button it will apply the hover – and then if you click on it will start the button action but will not close the hove appearance. To finish it you need to click anywhere outside the button area.